<template lang="pug">
  v-dialog( v-model="active" fullscreen hide-overlay scrollable transition="dialog-bottom-transition" persistent=true)
    template(v-slot:activator='{ on }')
      slot(name="activator" v-bind:on = 'on')
    v-card
      slot(name="header")
        v-toolbar(dark, color='primary')
          v-btn(icon, dark, @click='cancel')
            v-icon close
          v-toolbar-title {{ title }}
          v-spacer
          v-toolbar-items
            v-btn(dark, text, @click='confirm') 确认
      v-card-text.mini-height
        slot
</template>

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    name: 'v-fullscreen-dialog',
    props: ['title'],
    methods: {
      toggle(): void {
        this.active = !this.active
      },
      confirm() {
        this.$emit('confirm')
      },
      cancel() {
        this.toggle()
      },
      showBodyScrollBar() {
        const body = document.body
        const scrollY = body.style.top
        body.style.position = ''
        body.style.top = ''
        window.scrollTo(0, parseInt(scrollY || '0') * -1)
      },
      hiddenBodyScrollBar() {
        const scrollY = window.scrollY
        const body = document.body
        this.winScrollY = `-${scrollY}px`
        body.style.position = 'fixed'
        body.style.top = this.winScrollY
      }
    },
    watch: {
      active(active) {
        active ? this.hiddenBodyScrollBar() : this.showBodyScrollBar()
      }
    },
    data: function () {
      return {
        active: false
      }
    }
  })
</script>

<style scoped>
  .mini-height {
    height: calc(100vh - 64px);
  }
</style>